<script setup lang="ts">
import type { Ref } from 'vue'
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import SiderNav from '@/components/SiderNav.vue'
import { SiderNavRaw } from '@/types/global'

const router = useRouter()
const routerCode = ref('')
const menuData: Ref<SiderNavRaw> = ref([
  {
    id: '1',
    label: '前端',
    code: 'frontend'
  },
  {
    id: '2',
    label: '后端',
    code: 'backend'
  },
  {
    id: '3',
    label: '数据库',
    code: 'database'
  },
  {
    id: '4',
    label: '工具',
    code: 'tools'
  }
])
watchEffect(() => {
  routerCode.value = router.currentRoute.value.params.code as string
})
</script>
<template>
  <section class="h-blog-content-container">
    <section class="h-blog-content-sider h-box-bg-radius">
      <SiderNav :data="menuData" />
    </section>
    <section class="h-blog-content-main h-box-bg-radius">{{ routerCode }}</section>
  </section>
</template>
<style lang="scss" scoped>
.h-blog-content-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  height: fit-content;
  min-height: 100px;
  gap: 20px;

  .h-blog-content-sider {
    width: 180px;
    background: #fff;
  }
  .h-blog-content-main {
    flex: 1;
    background: #fff;
    border-radius: 4px;
  }
}
</style>
